<template>
    <div class="box">
        <h1>我是父亲曹操:{{ money }}</h1>
        <button @click="handler">找我的儿子曹植借10元</button>
        <Son ref="son"></Son>
    </div>
</template>

<script setup lang="ts">
//ref:可以获取真实的DOM节点,可以获取到子组件实例VC
//$parent:可以在子组件内部获取到父组件的实例
import Son from './Son.vue'
import { ref } from 'vue';
let money = ref(100000000);
let son = ref();  //名字注意要与子组件ref名字一致

const handler = () => {  //点击按钮触发的事件
    money.value += 10;
    son.value.money -= 10;  //儿子钱数减去10
    son.value.fly();  //调用儿子暴露的方法
}

//对外暴露
defineExpose({
    money
})
</script>

<style scoped>
.box {
    width: 100vw;
    height: 500px;
    background: skyblue;
}
</style>